<template>
  <div>
    <div>
      <div
          v-for="(item, index) of statusData"
          :key="index"
          :style="{ background: item.bg}"
          class="box-xg"
      >
        <i :style="{ opacity: status === item.key ? 1 : 0 }"><svg t="1625563144866" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1967" width="30" height="30"><path d="M384 883.08c-8.19 0-16.38-3.12-22.62-9.38-12.5-12.5-12.5-32.75 0-45.25L677.83 512 361.38 195.55c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L734.4 478.07c18.72 18.72 18.72 49.16 0 67.88L406.62 873.7c-6.24 6.25-14.43 9.38-22.62 9.38z m305.14-359.77h0.31-0.31z" p-id="1968"></path></svg></i>
        <span>{{ item.key }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BMIStatusComponent",
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusData: [
        { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
        { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
        { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
        { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
        { key: '肥胖', value: '>= 28.0', bg: 'orange' },
      ],
    }
  }
}
</script>

<style scoped>

</style>